<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" >

document.onmousemove = mouseMove;
function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}


document.onmouseup = mouseUp;
var dragObject     = null;
function makeClickable(object){
	object.onmousedown = function(){
		dragObject = this;
		document.getElementById("texto").value = object.alt;
	}
}
function mouseUp(ev){
	dragObject = null;
}
function atribuirObject (obj) {
	alert(obj);	
}
window.onload = function() {
	makeClickable(document.getElementById("img1"));
		makeClickable(document.getElementById("img2"));
			makeClickable(document.getElementById("img3"));
				makeClickable(document.getElementById("img4"));
};
</script>
<style type="text/css" >
#site{width:1002px;}
#img1{left:0px;position:absolute; }
#img2{left:1002px;position:absolute;}
#img3{left:300px;position:absolute;}
#img4{left:500px;position:absolute;}

</style>
</head>

<body>
<div id="site">
<img id="img1" src="images/drag_drop_club.gif" alt="img1" />
<img id="img2" src="images/drag_drop_diamond.gif" alt="img2" />
<img id="img3" src="images/drag_drop_heart.gif"  alt="img3" />
<img id="img4" src="images/drag_drop_spade.gif"  alt="img4" />
<br />

</div>
<div>
<input type="text" id="texto" />
</div>

</body>
</html>
